{extend name="public/base"}

{block name="title"}就行天下-首页{/block}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/jcrop/demos/demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="__STATIC__/jcrop/demos/demo_files/demos.css" type="text/css" />
<link rel="stylesheet" href="__STATIC__/jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="__STATIC__/jcrop/css/jquery.Jcrop.extras.css" type="text/css" />
{/block}

{block name="main"}
<div class="row-fluid">
    <div class="span9">
        <img src="__STATIC__/jcrop/demos/demo_files/sago.jpg" id="target" alt="Jcrop Image"
             style="display: none; visibility: hidden; width: 602px; height: 400px;">
        <div class="jcrop-holder"
             style="width: 602px; height: 400px; position: relative; background-color: rgb(0, 0, 0);">
            <div style="position: absolute; z-index: 600; width: 366px; height: 271px; top: 36px; left: 31px;">
                <div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;"><img
                        src="__STATIC__/jcrop/demos/demo_files/sago.jpg"
                        style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: -36px; left: -31px; width: 602px; height: 400px;">
                    <div class="jcrop-hline" style="position: absolute; opacity: 0.4;"></div>
                    <div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;"></div>
                    <div class="jcrop-vline right" style="position: absolute; opacity: 0.4;"></div>
                    <div class="jcrop-vline" style="position: absolute; opacity: 0.4;"></div>
                    <div class="jcrop-tracker" style="cursor: move; position: absolute; z-index: 360;"></div>
                </div>
                <div style="width: 100%; height: 100%; z-index: 320; display: block;">
                    <div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;"></div>
                    <div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;"></div>
                    <div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;"></div>
                    <div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;"></div>
                    <div class="ord-n jcrop-handle"
                         style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;"></div>
                    <div class="ord-s jcrop-handle"
                         style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;"></div>
                    <div class="ord-e jcrop-handle"
                         style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;"></div>
                    <div class="ord-w jcrop-handle"
                         style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;"></div>
                    <div class="ord-nw jcrop-handle"
                         style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;"></div>
                    <div class="ord-ne jcrop-handle"
                         style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;"></div>
                    <div class="ord-se jcrop-handle"
                         style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;"></div>
                    <div class="ord-sw jcrop-handle"
                         style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;"></div>
                </div>
            </div>
            <div class="jcrop-tracker"
                 style="width: 606px; height: 404px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;"></div>
            <input type="radio" class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px; display: none;"><img
                src="__STATIC__/jcrop/demos/demo_files/sago.jpg" alt="Jcrop Image"
                style="display: block; visibility: visible; width: 602px; height: 400px; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 0.2;">
        </div>


    </div>
</div>
{/block}

{block name="javascript"}
<script src="__STATIC__/jcrop/js/jquery.Jcrop.js"></script>
<script src="__STATIC__/jcrop/js/jquery.color.js"></script>
<script type="text/javascript">
    jQuery(function($){

        var jcrop_api;

        $('#target').Jcrop({
            bgFade:     true,
            bgOpacity: .2,
            setSelect: [ 60, 70, 540, 330 ]
        },function(){
            jcrop_api = this;
        });

        $('#fadetog').change(function(){
            jcrop_api.setOptions({
                bgFade: this.checked
            });
        }).attr('checked','checked');

        $('#shadetog').change(function(){
            if (this.checked) $('#shadetxt').slideDown();
            else $('#shadetxt').slideUp();
            jcrop_api.setOptions({
                shade: this.checked
            });
        }).attr('checked',false);

        // Define page sections
        var sections = {
            bgc_buttons: 'Change bgColor',
            bgo_buttons: 'Change bgOpacity',
            anim_buttons: 'Animate Selection'
        };
        // Define animation buttons
        var ac = {
            anim1: [217,122,382,284],
            anim2: [20,20,580,380],
            anim3: [24,24,176,376],
            anim4: [347,165,550,355],
            anim5: [136,55,472,183]
        };
        // Define bgOpacity buttons
        var bgo = {
            Low: .2,
            Mid: .5,
            High: .8,
            Full: 1
        };
        // Define bgColor buttons
        var bgc = {
            R: '#900',
            B: '#4BB6F0',
            Y: '#F0B207',
            G: '#46B81C',
            W: 'white',
            K: 'black'
        };
        // Create fieldset targets for buttons
        for(i in sections)
            insertSection(i,sections[i]);

        function create_btn(c) {
            var $o = $('<button />').addClass('btn btn-small');
            if (c) $o.append(c);
            return $o;
        }

        var a_count = 1;
        // Create animation buttons
        for(i in ac) {
            $('#anim_buttons .btn-group')
                .append(
                    create_btn(a_count++).click(animHandler(ac[i])),
                    ' '
                );
        }

        $('#anim_buttons .btn-group').append(
            create_btn('Bye!').click(function(e){
                $(e.target).addClass('active');
                jcrop_api.animateTo(
                    [300,200,300,200],
                    function(){
                        this.release();
                        $(e.target).closest('.btn-group').find('.active').removeClass('active');
                    }
                );
                return false;
            })
        );

        // Create bgOpacity buttons
        for(i in bgo) {
            $('#bgo_buttons .btn-group').append(
                create_btn(i).click(setoptHandler('bgOpacity',bgo[i])),
                ' '
            );
        }
        // Create bgColor buttons
        for(i in bgc) {
            $('#bgc_buttons .btn-group').append(
                create_btn(i).css({
                    background: bgc[i],
                    color: ((i == 'K') || (i == 'R'))?'white':'black'
                }).click(setoptHandler('bgColor',bgc[i])), ' '
            );
        }
        // Function to insert named sections into interface
        function insertSection(k,v) {
            $('#interface').prepend(
                $('<fieldset></fieldset>').attr('id',k).append(
                    $('<legend></legend>').append(v),
                    '<div class="btn-toolbar"><div class="btn-group"></div></div>'
                )
            );
        };
        // Handler for option-setting buttons
        function setoptHandler(k,v) {
            return function(e) {
                $(e.target).closest('.btn-group').find('.active').removeClass('active');
                $(e.target).addClass('active');
                var opt = { };
                opt[k] = v;
                jcrop_api.setOptions(opt);
                return false;
            };
        };
        // Handler for animation buttons
        function animHandler(v) {
            return function(e) {
                $(e.target).addClass('active');
                jcrop_api.animateTo(v,function(){
                    $(e.target).closest('.btn-group').find('.active').removeClass('active');
                });
                return false;
            };
        };

        $('#bgo_buttons .btn:first,#bgc_buttons .btn:last').addClass('active');
        $('#interface').show();

    });


</script>
{/block}